iT邦幫忙

1

仿Yahoo跑馬燈

  • 分享至 

  • xImage
  •  

一、前言

很久以前就想做這種上移的跑馬燈了。剛好這兩天網路上有看到,就參考並做了自己的版本。
網址:
https://docs.google.com/document/d/1_LSkCPGRlHqTQCZM5d5k5gWS4mZyLg73O4KlOLjRF-Y/pub

仿Yahoo跑馬燈
一、前言

很久以前就想做這種上移的跑馬燈了。剛好這兩天網路上有看到,就參考並做了自己的版本。
二、使用方式

$(function()
{
        $('#demoDiv').r_marquee() ;
}) ;

三、我版本的優點

是用jQuery套件的方式來寫成,使用上更方便了。也沒有CSS要複製,避免了ID、CLASS重複的問題。也沒有字串太長會跑版的問題,這一點是靠CSS的設定

whiteSpace: 'nowrap'

如果想要跑馬燈換頁的速度更加快,可以修改speed參數

defaults.speed = 2000 ;

如果想要控制跑馬燈的高度,可以修改li_Height參數

defaults.li_Height = 25 ;

至於整個跑馬燈的寬度,使用者也可以自行控制CSS去調整。

#demoDiv{width: 550px;}

四、demo & 原始碼

jsfiddle demo
http://jsfiddle.net/sheephead0818/nt0m7eh4/
github backup
http://ryanyang0818.github.io/%E4%BB%BFYahoo%E5%BC%8F%E8%B7%91%E9%A6%AC%E7%87%88/demo1.html


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言